<template>
    <div class="banner" :style="{background:'url('+banner+')'}">

        <div class="banner_inner">
            <div class="banner_left">
                <div class="banner_left_title">版权交易平台专业保障</div>
                <div class="banner_left_content">让您的原创更有力量...</div>
            </div>
            <div class="banner_right" :style="{background:'url('+bannerright+')'}"></div>
        </div>

    </div>

    <div class="outer">
        <div class="inner">
            <div class="content_title">版权交易流程</div>
            <div class="content_message">
                <div class="yuan_one">

                </div>

                <div class="yuan_two">

                </div>

                <div class="yuan_three">

                </div>

                <div class="yuan_four">

                </div>

                <div class="banquan_text_outer" :style="{background:'url('+banquan_background+')'}">
                    版权交易
                </div>

                <div class="step_1 step">
                    <div class="step_title">
                        <span>01</span> <span>注册认证</span>
                    </div>
                    <div class="step_content">
                        注册账号并完成实名认证，认证审核通过即可成为作者。
                    </div>
                </div>

                <div class="step_2 step">
                    <div class="step_title">
                        <span>02</span> <span>发布作品</span>
                    </div>
                    <div class="step_content">
                        创作完成后提交进行审核（创作流程操作便捷，方便写作）
                    </div>
                </div>

                <div class="step_3 step">
                    <div class="step_title">
                        <span>03</span> <span>确权完成</span>
                    </div>
                    <div class="step_content">
                        审核通过即为区块链确权完成，上链数据可核验，加强证据效力。
                    </div>
                </div>

                <div class="step_4 step">
                    <div class="step_title">
                        <span>04</span> <span>最终交易</span>
                    </div>
                    <div class="step_content">
                        版权交易，在进行版权转让、授权许可等活动时可提高交易的安全性
                    </div>
                </div>


            </div>
            <div class="white_block"></div>
        </div>
    </div>

</template>

<script>
    import banner from '@/assets/img/banquan/banquanbanner.png'
    import bannerright from '@/assets/img/banquan/banner_right.png'
    import banquan_background from '@/assets/img/banquan/banquan_background.png'
    export default {
        name: "banquan",
        data(){
            return{
                banner,
                bannerright,
                banquan_background,
            }
        }
    }
</script>

<style scoped>
    .banner{
        width: 100%;
        height: 320px;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        margin-top: -10px;
        overflow: hidden;
    }
    .banner_inner{
        width: 1001px;
        height: 100%;
        margin: 0px auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .banner_left_title{
        width: 542px;
        font-size: 50px;
        font-family: PangMenZhengDao;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 50px;
        text-shadow: 0px 3px 7px rgba(65, 69, 223, 0.35);
    }
    .banner_left_content{
        margin-top: 29px;
        font-size: 32px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 32px;
    }
    .banner_right{
        width: 352px;
        height: 216px;
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    .outer{
        width: 100%;
        overflow: hidden;
        background: #ffffff;
    }
    .inner{
        width: 1000px;
        margin: 0px auto;
    }
    .content_title{
        width: 100%;
        height: 170px;
        margin: 0px auto;

        font-size: 32px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #222222;
        line-height: 170px;

        text-align: center;
    }

    .content_message{
        width: 100%;
        overflow: hidden;
        position: relative;
        height: 678px;
    }

    .yuan_one{
        width: 678px;
        height: 678px;
        border: 1px solid #0EB0CB;
        opacity: 0.16;
        border-radius: 50%;

        margin: 0px auto;
        display: flex;
        align-items: center;
        z-index: 1;
        position: absolute;
        left: 161px ;
    }
    .yuan_two{
        width: 536px;
        height: 536px;
        border: 1px solid #0EB0CB;
        opacity: 0.16;
        border-radius: 50%;
        margin: auto auto;
        z-index: 1;
        position: absolute;
        left: 232px;
        top:71px;
    }

    .yuan_three{

        width: 390px;
        height: 390px;
        border: 1px solid #0EB0CB;
        opacity: 0.16;
        border-radius: 50%;
        z-index: 1;
        position: absolute;
        left: 305px;
        top:144px;

    }

    .yuan_four{
        width: 292px;
        height: 292px;

        border: 1px solid #0EB0CB;
        opacity: 0.16;
        border-radius: 50%;

        position: absolute;
        left: 354px;
        top: 193px;
        z-index: 1;
        background: #2eb0c6;
    }

    .banquan_text_outer{
        width: 233px;
        height: 238px;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        position: absolute;
        left: 384px;
        top: 225px;

        font-size: 38px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #FFFFFF;
        line-height: 220px;
        text-align: center;
    }

    .step{
        width: 354px;
        height: 123px;
        background: #FFFFFF;
        box-shadow: 0px 6px 40px 0px rgba(21, 22, 25, 0.1);
        border-radius: 8px;
        z-index: 10;
    }
    .step_title{
        margin-top: 7px;
    }
    .step_title span:nth-of-type(1){
        margin-left: 18px;
        font-size: 32px;
        font-family: Myriad Pro;
        font-weight: bold;
        color: #2EB0C6;
        line-height: 32px;
    }
    .step_title span:nth-of-type(2){
        font-size: 20px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #222222;
        line-height: 19px;
    }
    .step_content{
        width: 307px;
        margin-left: 18px;
        margin-top: 27px;
    }

    .step_1{
        position: absolute;
        top: 112px;
    }
    .step_2{
        position: absolute;
        top: 112px;
        right: 0px;
    }
    .step_3{
        position: absolute;
        bottom: 74px;
        left: 62px;
    }
    .step_4{
        position: absolute;
        bottom: 74px;
        right: 62px;
    }
    .white_block{
        width: 100%;
        height: 180px;
    }


</style>